<template>
  <div>
    <div class="header">1
    </div>

    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>卡片名称</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div class="text item">
          <el-table
            :data="list"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="interface_name"
              label="名称"
              width="180"
              colspan="2"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.interface_name" @blur="onInputBlur(scope.row)" /></template>
            </el-table-column>
            <el-table-column
              prop="interface_url"
              label="地址"
              width="180"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.interface_url" @blur="onInputBlur(scope.row)" /></template>
            </el-table-column>
            <el-table-column
              prop="getName"
              label="请求方式"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.getName" @blur="onInputBlur(scope.row)" /></template>
            </el-table-column>
            <el-table-column
              prop="call_count"
              label="请求次数"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.call_count" @blur="onInputBlur(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column
              prop="call_count"
              label="控制"
            >
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="启动"
                  :active-value="1"
                  :inactive-value="0"
                  @change="change(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>

    </div>
  </div>
</template>

<script>
// import axios from 'axios'
export default {
  data() {
    return {
      e: '',
      currentPage: 1,
      pageSize: 10,
      list: [], // 存储接口返回的数据
      value: true,
      value1: false,
      listLoading: false // 添加listLoading属性，用于表示数据加载状态
    }
  },
  computed: {
  },
  created() {
    this.fetchData()
  },
  methods: {
    DownloadConfiguration(e) {
      console.log(e)
    },
    fetchData() {
      this.listLoading = true // 设置数据加载状态为true
      // 发送请求获取数据
      const url = `http://127.0.0.1:9527/game/api/api_list?page=${this.currentPage}&limit=${this.pageSize}`
      fetch(url)
        .then(response => response.json())
        .then(data => {
          console.log(data)
          this.list = data.data // 将接口返回的数据赋值给列表
          this.total = data.total // 设置总数据条数
          this.$notify({
            title: '成功',
            message: '总共加载：' + data.total + '条数据',
            type: 'success'
          })
          this.listLoading = false // 数据加载完成后，设置状态为false
        })
        .catch(error => {
          console.error('Error:', error)
          this.listLoading = false // 发生错误时，也需要设置状态为false
        })
    },
    change(row) {
      console.log('row:', row)
      console.log('id:', row.id)
      console.log('value:', this.value) // 使用this.value获取开关的状态值
    },
    onInputBlur(row) {
      console.log('row:', row)
      console.log(this.list)
      console.log(row.interface_name)
    }
  }
}
</script>
   <style scoped>
   .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 95%;
    margin: 0 auto;
  }
   </style>
